<template>
  <div>
    <div style="height: 40px">
      <h1>服务审核</h1>
    </div>
    <div style="width: 100%">
      <div class="shaixuan_1">&nbsp;
        <i class="iconfont icon-shaixuan"></i>
        <span slot="title">筛选</span>
      </div>
      <div class="shaixuan_2">
        <div id="text">
          <font></font>
        </div>
        <div id="input">
          <el-input v-model="doctor.name" placeholder="请输入医生姓名"></el-input>
        </div>
        <div id="date">
          <el-dropdown style="margin-right: 70px" @command="departmentMethod">
            <el-button type="primary">
              {{ department }}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item, i) in departments" :key="i" :command="item">{{ item }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <el-dropdown @command="postMethod">
            <el-button type="primary">
              {{ post }}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item, i) in posts" :key="i" :command="item">{{ item }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        <div id="button">
          <el-button type="primary" @click="doctorFilterDoctor">筛选</el-button>
        </div>

      </div>
    </div>
    <div>
      <div class="shaixuan_1">&nbsp;
        <i class="iconfont icon-querylist"></i>
        <span slot="title">医生列表</span>
      </div>

      <el-table :data="tableData" border style="width: 100%" ref="multipleTable"
        @selection-change="handleSelectionChange">
        <el-table-column prop="" label="选择" width="50" align="center" type="selection">
        </el-table-column>
        <el-table-column prop="id" label="ID" width="60">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="100">
        </el-table-column>
        <el-table-column prop="telephone" label="电话" width="120">
        </el-table-column>
        <el-table-column prop="hospital" label="医院" width="150">
        </el-table-column>
        <el-table-column prop="department" label="科室" width="100">
        </el-table-column>
        <el-table-column prop="professionalTitle" label="职务" width="100">
        </el-table-column>
        <el-table-column prop="createTime" label="入职时间" width="170">
        </el-table-column>
        <el-table-column prop="serviceStatus" label="审核状态" width="100">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              style="background-color: #00d4ff; color: #ebebeb">查看</el-button>
            <el-button @click="handleEdit(scope.$index, scope.row)" type="text" size="small"
              style="background-color: #0040ff; color: #ebebeb">审核</el-button>
            <el-button @click="delDoctor(scope.$index, scope.row)" type="text" size="small"
              style="background-color: red; color: #ebebeb">删除</el-button>

            <!-- 编辑时候的弹出层 -->
            <el-dialog title="服务审核" :visible.sync="dialogFormVisible" width="600px" top="20px" :append-to-body="true">
              <div>
                <h3>姓名: <i style="color: red;">{{ doctorAuditTemp.name }}</i></h3>
              </div>
              <div >
                审核
                <el-radio-group v-model="doctorAuditTemp.serviceStatus">
                  <el-radio :label="1">审核通过</el-radio>
                  <el-radio :label="0">审核不通过</el-radio>
                </el-radio-group>
              </div>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSet(scope.$index, scope.row)">确 定</el-button>
              </div>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>

      <div id="all">
        <el-button type="primary" @click="SelectAll(tableData)" class="el-button el-button--primary el-button--mini">全 选
        </el-button>
        <el-button type="primary" @click="AddGs()" class="el-button el-button--primary el-button--mini">批量删除</el-button>
        </div>
      <div id="page">
        <el-pagination background @current-change="handleCurrentChange" :current-page="val" :page-size="pageSize"
          layout="total, prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ServiceAudit',
  data() {
    return {
 multipleSelection: [],//批量多选
      val: 0,
      dialogFormVisible: false, //弹出层默认为关闭
      //弹出层中的表单
      doctor: {
        // 搜索条件医生名
        name: "",
        depTmName: "",
        positionName: ""
      },
      doctorAuditTemp: {
        id: '',
        name: '',
        serviceStatus: 0,
        
      },

      serviceAudit: '',

      formLabelWidth: '50px',

      departments: ['请选择科室', '内科', '分泌科', '消化科', '儿科', '中医科'],
      department: '请选择科室',
      posts: [
        '请选择职务',
        '主任医师',
        '副主任医师',
        '主治医师',
        '住院医师',
        '药剂师',
        '护师',
      ],
      post: '请选择职务',
      tableData: [],

      filterStatus: false,

      total: 0,

      pageSize: 3
    }
  },
  methods: {
     //多选后数据变化
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection)
    },
    //全选按钮
    SelectAll(rows) {
      console.log("rows : " + JSON.stringify(rows));
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();//清除全选
      }
    },
    AddGs() {
      var arr = [];
      for (var i = 0; i < this.multipleSelection.length; i++) {
        arr[i] = this.multipleSelection[i].id
      }
      console.log(this.multipleSelection)
      this.$confirm('此操作将永久删除该信息, 是否删除', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.$axios({
          method: 'delete',
          url: "doctor/batchRemove",
          params: {
            array: arr.toString()
          }
        }).then((data) => {
          this.$message({
            type: 'success',
            message: '删除成功'
          });
          this.$router.go(0)
          

        })
       
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //职务选择
    departmentMethod(department_name) {
      this.department = department_name;
    },
    //科室选择
    postMethod(post_name) {
      this.post = post_name;
    },

    //医生详情
    handleClick(obj) {
      this.$router.push({
        name: 'DoctorInfo', params: {
          doctor: obj
        }
      })
    },
    //审核展示
    handleEdit(index, row) {
      this.dialogFormVisible = true //开启弹出层
      //对弹出层中的表单赋值
      this.doctorAuditTemp.name = row.name;
      this.doctorAuditTemp.id = row.id,
      this.doctorAuditTemp.serviceStatus = ''
    },
    //医生删除
    delDoctor(index, row) {
      this.$confirm('此操作将永久删除该信息, 是否删除', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData.splice(index, 1);
        this.$axios({
          method:"delete",
          url:'/doctor/deleteByDoctorId/'+row.id
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //审核确定
    handleSet(index, row) {

      this.$confirm('此操作将更改用户信息, 是否继续', '更改', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.serviceAudit = this.doctorAuditTemp;

        this.$axios({
          method: 'put',
          url: '/doctor/updateWUByid/'+this.serviceAudit.id+'/'+this.serviceAudit.serviceStatus,
        }).then(date => {
          this.dialogFormVisible = false;
          this.handleCurrentChange(this.val);
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消更改'
        });
      });
     

    },
        //筛选
    doctorFilterDoctor() {
      if (this.department !== "请选择科室") {
        this.doctor.department = this.department;
      } else {
        this.doctor.department = " ";
      }
      if (this.post !== "请选择职务") {
        this.doctor.professionalTitle = this.post;
      } else {
        this.doctor.professionalTitle = " ";
      }
      this.filterStatus = true;
      this.$axios({
        method:'get',
        url:"doctor/selectByCondition/"+this.val+'/'+this.pageSize+'/'+this.doctor.name+'/'+this.doctor.department+'/'+this.doctor.professionalTitle
        
      }).then((data)=>{
        var arr = data.data.data.records
        for (var i = 0; i < arr.length; i++) {
          if (arr[i].serviceStatus == true) {
            arr[i].serviceStatus = '已审核'
          } else {
            arr[i].serviceStatus = '未审核'
          }
        }
        this.tableData = arr;
        this.total = data.data.data.total
      })
    },
    //获取所有数据
    getDoctorServer(cur, len) {
      this.$axios({
        method: 'GET',
        url: '/doctor/findAllByPage/' + cur + '/' + len,
      }).then((data) => {
        var arr = data.data.data.records
        for (var i = 0; i < arr.length; i++) {
          if (arr[i].serviceStatus == true) {
            arr[i].serviceStatus = '审核通过'
          } else {
            arr[i].serviceStatus = '审核未通过'
          }

        }
        this.tableData = arr;

        this.total = data.data.data.total;
        this.val = cur;
      })
    },
    //分页查询操作，要判断是否筛选过
    
    handleCurrentChange(val) {
      this.getDoctorServer(val, 3);
    }
  },
  //加载页面后获取所有
  created() {
    this.getDoctorServer(1, 3);
  }
}
</script>

<style scoped>
.shaixuan_1 {
  /* border: 1px solid red; */
  margin-right: 200px;
  margin-top: 20px;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  background-color: rgb(241, 241, 241);
}

.shaixuan_2 {
  border: 1px solid rgb(216, 216, 216);
  margin-right: 200px;
  height: 100px;
}

#text {
  margin-top: 40px;
  margin-left: 20px;
  float: left;
}

#input {
  width: 200px;
  margin-top: 30px;
  float: left;
}

#date {
  float: left;
  margin-top: 30px;
  margin-left: 80px;
}

#button {
  float: left;
  margin-top: 30px;
  margin-left: 80px;
}

#shaixuan_1 {
  /* border: 1px solid red; */
  margin-right: 200px;
  margin-top: 20px;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  background-color: rgb(241, 241, 241);
}

#all {
  margin-top: 40px;
  margin-left: 30px;
  float: left;
}

#delall {
  margin-top: 35px;
  margin-left: 30px;
  float: left;
}

#page {
  margin-top: 35px;
  margin-left: 150px;
  float: left;
}
</style>
